<template>

  <div class="person">
    <h1>情况二: 监视ref定义的对象数据类型</h1>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>


</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, watch} from 'vue'

//----------------数据------------------------
let person = ref({
  name: 'FindYou',
  age: 21
})

//------------------方法-------------------------
function changeName() {
  person.value.name = '贾金博'
}

function changeAge() {
  person.value.age += 1
}

function changePerson() {
  person.value = {name: '张三', age: 211}
}

//-------------------监视-------------------------
// 监视 对象监视的是地址 数据的地址
watch(person, (newValue, oldValue)=>{
  console.log('person发生了变化', newValue, oldValue);
}, {deep: true}) // watch的第三个参数 配置对象
</script>

<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>